import { useState } from 'react'
import './index.scss'
import { Avatar, Button, Card } from 'antd'
import { EditOutlined, ControlOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import ManageBlog from './component/ManageBlog'
import StarBlog from './component/StarBlog'
import { useSelector } from 'react-redux'
import avater from '@/assets/avater.jpeg'
 
const { Meta } = Card

const tabListNoTitle = [
  {
    key: 'app',
    label: '个人博客',
    children: <ManageBlog/>
  },
  {
    key: 'project2',
    label: '点赞',
    children: <StarBlog/>
  },
]

const Personal = () => {

  const [activeTabKey2, setActiveTabKey2] = useState('app')
  const onTab2Change = (key) => {
    setActiveTabKey2(key)
  }

  const userInfo = useSelector(state => state.user.userInfo)
  // 头像
  const userOtherInfo = useSelector(state => state.userOtherInfo.userOtherInfo)

  return (
    <div className="personal">
      <Card className='personal-header'>
        <Card.Grid 
          className="personal-info"
          hoverable={false} >
          <Meta
              avatar={<Avatar size={64} src={userOtherInfo.avatar || avater} />}
              title={userInfo.username}
              description="100访问量 | 10原创 | 5粉丝 | 10原创 "
          />
        </Card.Grid>
        <Card.Grid 
          className="personal-setting"
          hoverable={false} >
              <Link to={'/editinfo'}>
                <Button icon={<EditOutlined />}>编辑资料</Button>
              </Link>
              <Link to={'/setting'}>
                <Button icon={<ControlOutlined />}>账号设置</Button>
              </Link>
        </Card.Grid>     
      </Card>

      <Card
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        onTabChange={onTab2Change}
        tabProps={{
          size: 'large',
        }}
      >
      </Card>
    </div>
  )
}

export default Personal